<template>
	<view class="w">
		<view>
			<!-- 这是首页的头部 -->
			<view class="index_head">
				<view class="index_head_left">
					<view class="index_head_left_hello">Hello,{{ username }}</view>
					<view class="index_head_left_school">软件学院出品</view>
				</view>
				<view class="box" @click="message">
					<cmd-icon type="bell" size="24" color="#35D0BA" class="index_head_icon"></cmd-icon>
					<!-- <u-badge :isDot="true" type="success" class="dian"></u-badge> -->
				</view>
			</view>
			<!-- 这是图片 -->
			<view class="index_img"></view>
			<!-- 这是图片下的一堆小图标 -->
			<view class="index_lists">
				<navigator url="/pages/fun/Clock/Clock" class="index_lists_box">
					<view class="index_lists_icon">
						<image src="https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/other/index_01.png"
							class="index_lists_icon_img" mode=""></image>
					</view>
					<view class="index_lists_lis_text">今日打卡</view>
				</navigator>
				<navigator url="/pages/fun/looking/looking" class="index_lists_box">
					<view class="index_lists_icon">
						<image src="https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/other/index_02.png"
							class="index_lists_icon_img" mode=""></image>
					</view>
					<view class="index_lists_lis_text">监督占座</view>
				</navigator>
				<navigator url="/pages/fun/jifen/jifen" class="index_lists_box">
					<view class="index_lists_icon">
						<image src="https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/other/index_03.png"
							class="index_lists_icon_img" mode=""></image>
					</view>
					<view class="index_lists_lis_text">积分商城</view>
				</navigator>
				<navigator url="/pages/fun/ranking/ranking" class="index_lists_box">
					<view class="index_lists_icon">
						<image src="https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/other/index_04.png"
							class="index_lists_icon_img" mode=""></image>
					</view>
					<view class="index_lists_lis_text">排行榜</view>
				</navigator>
				<navigator url="/pages/fun/confirm_seat/heatSeat/test03/test03" class="index_lists_box">
					<view class="index_lists_icon">
						<image src="https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/other/index_05.png"
							class="index_lists_icon_img" mode=""></image>
					</view>
					<view class="index_lists_lis_text">活动</view>
				</navigator>
			</view>
			<!-- 通知栏部分 -->

			<view class="message">
				<u-notice-bar :text="text1" speed="70" mode="closable" url="/pages/fun/message/list2/list2"></u-notice-bar>
			</view>


			<!-- 用户没有选择座位提示框 -->
			<view class="order_box_false order_box" v-if="status == 1">
				<view class="order_box_left">
					<view class="no-choose-tips">你还没有选择座位</view>
					<view class="tips">快去选择你想要的座位把</view>
				</view>
				<view class="navt">
					<navigator url="/pages/bottom-nav/choose/choose"  style="font-size: 18px;">去选座
					</navigator>
				</view>
			</view>

			<!-- 用户预约了座位未签到   -->
			<view class="order_box" v-if="status ==2">
				<view class="order_libiary" @click="ToChoose">
					<view class="libiary">{{ SeatVo.areaName }}</view>
					<view class="seat">{{ SeatVo.row }} 排{{SeatVo.col}} 座</view>
				</view>
				<view class="order_time ">
					请在
					<text>{{ SeatVo.date }}</text>
					前到场馆签到
				</view>
				<view class="order_choose">
					<view class="order_choose_left" style="color:#8a2be2; font-size: 16px;" @click="goSign()">前往签到
					</view>
					<view class="order_choose_right" style="font-size: 16px;" @click="completeStudy">取消预定</view>
				</view>
			</view>

			<!-- 当用户签到以后的提示框 -->
			<view class="order_box_false1 order_box" v-if="status == 3">
				<view class="order_libiary1">
					<view class="weclome">
						你的座位是{{Seat.row}} 排:{{Seat.col}} 座

					</view>
					<view class="tips1">记得结束学习哦</view>
				</view>
				<view class="over" @click="OverLearn">结束学习</view>
			</view>

			<!-- 考试相关部分 -->
			<view class="exam-content">
				<view class="header">
					<view class="title">模拟考试</view>
				</view>
				<view class="bottom">
					<view class="left">
						<view class="pictrue">
							<image src="https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/index/zs.png" mode="">
							</image>
							<view @click="simulation" class="text">模拟考试</view>
						</view>
					</view>
					<view class="right">
						<view class="item">
							<view @click="record" class="text">考试记录</view>
						</view>
						<view class="item">
							<!-- <view @click="secret" class="text">考前密卷</view> -->
							<view class="text">考前密卷</view>
						</view>
					</view>
				</view>
			</view>
			<view class="formal" @click="compare()">
				<view class="header">
					<view class="title">在线考试</view>
				</view>
				<view class="bottom">
					<view class="text">
						<view class="top">正式考试</view>
						<!-- <view @click="entrance" class="bottom">快捷考试入口 ></view> -->
						<view class="bottom">快捷考试入口 ></view>
					</view>
				</view>
			</view>
			<view @click="click()"> 授权</view>
		</view>

	</view>
</template>

<script>
	import cmdIcon from '@/components/cmd-icon/cmd-icon.vue';
	// 引用图像插件   Avatar 头像
	import cmdAvatar from '@/components/cmd-avatar/cmd-avatar.vue';
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			cmdIcon,
			cmdAvatar
		},
		data() {
			return {
				list: ['张三', '李四', '王五', '严正兴'],
				libiarylist: {

					libiary: '',
					seat: '', //阅览室对应的id
					time: '',
					seatId: null //独一无二的id
				},
				Seat: {},
				username: '',
				status: 1,
				text1: 'aa',
				type: 'warning',
				leave: false, //false代表没有离开，true代表离开
				quxiao: true,
				SeatVo: {},

			};
		},
		computed: {
			...mapState(['userinfo'])
		},
		onLoad() {
			this.Homeinit();
			uni.$on('handleSuccess',data=>{
				console.log(data);
				if(data)
				{
					this.Homeinit()
				}
			})
		},
		onUnload() {
			uni.$off('handleSuccess')
		},
		onPullDownRefresh() {
			this.Homeinit();
			uni.stopPullDownRefresh();
		},

		methods: {
			click() {
				uni.requestSubscribeMessage({
					tmplIds: ['HX7GtwSs2RO4MYd5_fVP728ZiHi2MmsrPrCX_wB4duA'],
					success(res) {
						console.log(res);
					}
				})
			},
			message() {
				uni.navigateTo({
					url: '../../fun/message/list2/list2'
				});
			},
			goSign() {
				uni.navigateTo({
					url: "/pages/fun/confirm_seat/confirm_seat"
				})
			},
			record() {
				uni.navigateTo({
					url: '../../user/exam/record'
				});
			},
			simulation() {
				uni.navigateTo({
					url: '../../user/exam/format?id=' + 22
				});
			},
			ToChoose() {
				if (this.status == 0) {
					console.log(this.status);
					uni.navigateTo({
						url: '../../fun/confirm_seat/confirm_seat?seatId=' + this.libiarylist.seatId
					});
				}
			},
			compare() {
				uni.navigateTo({
					url: '../../user/exam/compare'
				});
			},
			// 取消预定
			async completeStudy() {

				let data = await uni.$u.http
					.get('/app/seat/leaveSeat/' + this.SeatVo.id + '/' + 0)
					
					uni.showToast({
						title: '取消预定成功',
						duration: 2000
					});
				
					this.Homeinit()
				

			},
			// 结束学习
			OverLearn() {
				uni.$u.http
					.get('/app/seat/leaveSeat/' + this.Seat.id + '/' + 1)
					.then(res => {
						uni.showToast({
							title: "结束",
							duration: 2000
						});
						this.Homeinit();
					})
			},
			Homeinit() {
				uni.$u.http
					.get('/app/home/homePage')
					.then(res => {
						console.log(res);
						if (res.code == 0) {
							this.status = res.data.type
							if (this.status == 2) {
								this.SeatVo = res.data.seatDto
							}
							if (this.status == 3) {
								this.Seat = res.data.seatEntity
							}
							if (res.data.message != null) {
								this.text1 = res.data.message.text
							}

						}
					})


			}
		}
	};
</script>

<style lang="scss" scoped>
	.w {
		/* background-color: #111A34; */
		margin: 0 15px;
	}

	.index_head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		/* background-color: pink; */
		height: 80px;
		padding: 0px 5px;
		align-items: flex-start;
		/* border-bottom: 1px solid #111A34; */
	}

	.index_head_left {
		/* margin: 0 10px; */
		display: flex;
		width: 40%;
		flex-direction: column;
		justify-content: center;
		/* background-color: #F0AD4E; */
		height: 80px;
	}

	.index_head_left_hello {
		font-size: 18px;
		color: #35d0ba;
		font-weight: bold;
	}

	.index_head_left_school {
		font-size: 14px;
	}

	.index_head_icon {
		width: 8%;
		margin: 30px 10px;
		height: 30px;
	}

	.index_head_right {
		background: url('https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/other/tongzhi.png') no-repeat center bottom;
		background-size: cover;
		width: 8%;
		display: flex;
		margin: 25px 10px;
		flex-direction: column;
		align-items: center;
		height: 30px;
	}

	/* 轮播图 */
	.index_img {
		height: 146px;
		background: url('https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/other/rbt01.jpg') no-repeat center bottom;
		background-size: contain;
	}

	/* 明日预约/监督看座/积分商城/排行榜/活动平台 */
	.index_lists {
		margin-top: 15px;
		height: 70px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}

	.index_lists_box {
		display: flex;
		flex-direction: column;
		align-content: space-between;
		justify-content: space-between;
		align-items: center;
		width: 15%;
		height: 70px;
	}

	.index_lists_icon {
		height: 45px;
		width: 85%;
	}

	.index_lists_icon_img {
		width: 100%;
		height: 100%;
	}

	.index_lists_lis_text {
		font-size: 12px;
	}

	.none {
		margin: 30px 10px;
		height: 20px;
		display: flex;
		flex-direction: row;
		align-content: space-around;
		justify-content: space-between;
	}

	.none_text {
		font-size: 20px;
		color: #007aff;
	}

	.none_icons {
		width: 30px;
		height: 30px;
		background: url('https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/other/paihangbang.png') no-repeat center bottom;
		background-size: cover;
	}

	.uni-list::before {
		background-color: transparent;
		height: 0;
	}

	.uni-list-cell::after {
		/* background-color: #007AFF; */
	}

	.order_box {
		background-image: url('https://img0.baidu.com/it/u=2403914180,2584389539&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500');
		// background-color: #007AFF;
		background-size: 100% 100%;
		opacity: 0.9;
		margin: 20px 0;
		padding: 10px 30px;
		height: 130px;
		box-shadow: 5px 5px 20px #d3d3d3, -1px -1px 20px rgba(255, 255, 255, 0.5);
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-content: space-around;
	}

	.order_box_false {
		flex-direction: row;
		align-items: center;
		padding: 10px;
	}

	.order_box_left {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: space-around;
	}

	.order_libiary {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.order_libiary .libiary {
		font-size: 18px;
		width: 60%;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.order_choose {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.seat {
		padding: 0 10px;
		font-size: 20px;
		font-weight: bold;
		color: #6cb43c;
	}

	.order_time {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.no-choose-tips {
		font-size: 20px;
		font-weight: bold;
	}

	.navt {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #9aceeb;
		border-radius: 15px;
		width: 35%;
		height: 40px;
		text-align: center;
	}

	.message {
		margin-top: 20px;
	}

	.box {
		// border: 1px #000000 solid;
		display: flex;
		justify-content: space-around;
		border-radius: 15px;
		// overflow: hidden;
		zoom: 100%;
		// height: 50px;
		// position: relative;
		// background-color: #007AFF;
	}

	.dian {
		position: absolute;
		margin-top: 550px;
		// border: 1px #000000 solid;
		background-color: #d94646;
	}

	.exam-content {
		margin: 10px 0px 10px;
		background-color: #fff;

		.header {
			height: 30px;

			.title {
				padding-left: 10px;
				line-height: 40px;
			}
		}

		.bottom {
			display: flex;
			margin-top: 10px;

			.left {
				width: 50%;
				height: 140px;
				border-top: 1px solid #dedede;
				padding-top: 10px;
				text-align: center;

				.pictrue {
					width: 75px;
					height: 75px;
					margin: 10px auto 0;

					image {
						display: block;
						width: 100%;
						height: 100%;
					}

					.text {
						margin-top: 10px;
						line-height: 30px;
						width: 90px;
						height: 30px;
						color: #fff;
						font-size: 14px;
						border-radius: 10px;
						background-color: #18b4ed;
					}
				}
			}

			.right {
				border-left: 1px solid #dedede;
				width: 50%;

				.item {
					display: flex;
					width: 100%;
					height: 70px;
					padding-right: 10px;
					padding-left: 10px;
					border-top: 1px solid #dedede;
					background: url('https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/index/jilu.png') 30px center/20px 20px no-repeat;

					.text {
						text-align: center;
						vertical-align: middle;
						flex: 1;
						min-width: 0;
						font-size: 14px;
						line-height: 70px;
					}
				}

				.item~.item {
					margin-top: 10px;
					background: url('https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/index/jilu.png') 30px center/20px 20px no-repeat;
				}
			}
		}
	}

	.formal {
		background-color: #fff;

		.header {
			height: 40px;
			border-bottom: 1px solid #dedede;

			.title {
				padding-left: 10px;
				line-height: 40px;
			}
		}

		.bottom {
			display: flex;
			height: 100px;
			background: url('https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/index/formal.png') 250px center/75px 75px no-repeat;

			.text {
				margin-left: 20px;

				.top {
					margin-top: 30px;
					font-size: 16px;
					font-weight: bold;
				}

				.bottom {
					font-size: 14px;
					color: #999;
				}
			}
		}
	}

	.order_libiary1 {
		width: 80%;
		height: 48%;
		display: flex;
		// background-color: #fff;
		flex-direction: column;
		justify-content: space-between;
		padding-bottom: 5px;
	}

	.order_box_false1 {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 8px;
	}

	.over {
		margin-top: 3px;
		// color: #FFFFFF;
		font-size: 16px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #9aceeb;
		border-radius: 5px;
		width: 70%;
		height: 35px;
		text-align: center;
		letter-spacing: 5px;
	}

	.weclome {
		font-size: 18px;
		width: 100%;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tips1 {
		font-size: 12px;
	}
</style>
